
<template>
  <div>
    <div>
      <div class="find_die" v-if="dongtaiPageArr.length!=0">
        <div>
          <div v-for="(item,index) in dongtaiPageArr" :key="index">
            <p>
              <span class="li_one_home-zuixin-con" @click="clickto(item.tractate_member_id)">
                <img
                  :src="item.info_avatar?item.info_avatar:'http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%201.png'"
                  alt
                  mode="aspectFill"
                />
                <span>{{item.info_nick}}</span>
                <img
                  src="https://www.zhaoshengku.net/v.png"
                  alt
                  class="v_imgsrc"
                  v-if="item.info_type==4"
                />
              </span>
            </p>
            <p>{{item.tractate_content}}</p>
            <div>
              <div v-for="(src,ind) in item.tractate_img_min" :key="ind">
                <img :src="src" alt mode="aspectFill" @click="topic_preview(index,ind)" />
              </div>
            </div>
            <p>
              <span>{{item.tractate_add_time}}</span>
              <span @click="pinglValueme(item.tractate_id,index)">
                <img
                  src="http://www.zhaoshengku.net/wx-%E4%BF%A1%E6%81%AF%20%E6%8B%B7%E8%B4%9D%206.png"
                  alt
                />
                <span>{{item.tractate_comment_num}}</span>
              </span>
              <span @click="dianZanclick(item.tractate_id,index)">
                <img
                  :src="!item.my_comment_num  ||  item.my_comment_num==0?'https://www.zhaoshengku.net/bianzujjjlik.png':'https://www.zhaoshengku.net/likelanwoxihuan.png'"
                  alt
                />
                <span>{{item.tractate_like}}</span>
              </span>
            </p>
            <div class="span_input_p" v-if="itemTractate_comment_numInputs==index">
              <input
                type="text"
                class="input_p"
                :value="pinglunIvalue"
                @input="pinglun"
                placeholder="请输入评价内容"
              />
              <span class="span_p" @click="fabupL(item.tractate_id,index)">发布</span>
            </div>
            <div v-if="itemTractate_comment_numInput==index" class="huifydiv">
              <div v-for="(items,indexs) in pinglunArr" :key="indexs">
                <p>
                  <img
                    :src="items.info_avatar?items.info_avatar:'http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%201.png'"
                    mode="aspectFill"
                    alt
                  />
                  <span>{{items.info_nick}}</span>
                </p>
                <p>{{items.comment_msg}}</p>
                <p>
                  <span>{{items.comment_time}}</span>
                  <span @click="dianZanclickss(items.comment_id,indexs)">
                    <img
                      :src="!items.my_comment_num  ||  items.my_comment_num==0?'https://www.zhaoshengku.net/bianzujjjlik.png':'https://www.zhaoshengku.net/likelanwoxihuan.png'"
                      alt
                    />
                    <span>{{items.laudCount}}</span>
                  </span>
                </p>
              </div>
              <div class="alangto" @click="gengs(item.tractate_id,index)" v-if="alaisshow">查看更多</div>
            </div>
          </div>
        </div>
      </div>
      <div class="find_fab_jia" @click="fDongt">
        <img src="https://www.zhaoshengku.net/+beijdt.png" alt />
      </div>
    </div>
    <div class="nono_div" v-if="dongtaiPageArr.length==0">
      <img src="https://www.zhaoshengku.net/bdfcedaebcbee.jpg" alt />
      暂时没有最新动态！
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dongtaiPageArr: [],
      pagenum: 1,
      pinglunArr: [],
      itemTractate_comment_numInput: -1,
      headerCode: "",
      pinglunIvalue: "",
      imgfor: false,
      alaisshow: false,
      itemTractate_comment_numInputs: -1,
      huifupagenum: 1
    };
  },
  methods: {
    // 获取评论内容
    pinglValueme(e, ind) {
      wx.showToast({
        title: "正在加载中",
        icon: "loading",
        duration: 5000,
        mask: true
      });
      this.pinglunIvalue = "";
      this.huifupagenum = 1;
      var _this = this;
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/getcomment",
        method: "post",
        header: {
          Authorization: _this.headerCode
        },
        data: {
          pagenum: this.huifupagenum,
          pagesize: 5,
          comment_type: 2,
          comment_fromid: e
        },
        success: res => {
          console.log(res);
          if (res.data.code == 200) {
            wx.hideToast();
            if (res.data.data.last_page > 1) {
              this.alaisshow = true;
            } else {
              this.alaisshow = false;
            }
            _this.itemTractate_comment_numInput = ind;
            _this.itemTractate_comment_numInputs = ind;
            _this.pinglunArr = res.data.data.data;
            if (res.data.data.data.length > 0) {
              _this.itemTractate_comment_num = ind;
              _this.pinglunArr.forEach(res => {
                res.comment_time = res.comment_time.substring(0, 10);
              });
            }
          } else {
            wx.hideToast();
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 1500,
              mask: true
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 点赞
    dianZanclick(id, e, xm) {
      var _this = this;
      wx.request({
        url: "https://api.zhaoshengku.net/index/article/liketractate",
        method: "post",
        data: {
          id: id
        },
        header: {
          Authorization: _this.headerCode
        },
        success: res => {
          if (res.data.code == 201) {
            wx.showToast({
              title: "点赞成功",
              icon: "true",
              duration: 1000,
              mask: true
            });
            _this.dongtaiPageArr[e].tractate_like =
              _this.dongtaiPageArr[e].tractate_like + 1;
            _this.dongtaiPageArr[e].my_comment_num = 1;
          } else if (res.data.code == 200) {
            _this.dongtaiPageArr[e].tractate_like =
              _this.dongtaiPageArr[e].tractate_like - 1;
            _this.dongtaiPageArr[e].my_comment_num = 0;
          } else if (res.data.code == 401) {
            wx.showToast({
              title: "您还没有登录,不能进行此操作！",
              icon: "none",
              duration: 1000,
              mask: true
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 发布评论
    fabupL(id, ind) {
      var _this = this;
      console.log("111");
      if (_this.pinglunIvalue == "") {
        wx.showToast({
          title: "您还未输入评价内容",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      }
      console.log("111");
      wx.request({
        url: "https://api.zhaoshengku.net/index/comment/setComment",
        method: "post",
        data: {
          oper_type: "add",
          comment_type: 2,
          comment_msg: _this.pinglunIvalue,
          comment_upid: 0,
          comment_fromid: id
        },
        header: {
          Authorization: _this.headerCode
        },
        success: res => {
          console.log(res);
          if (res.data.code == 200) {
            wx.showToast({
              title: "评论成功",
              icon: "true",
              duration: 1000,
              mask: true
            });
            _this.itemTractate_comment_num = ind;
            _this.itemTractate_comment_numInputs = -1;
            var util = require("../../utils/index.js");
            _this.dongtaiPageArr[ind].tractate_comment_num =
              _this.dongtaiPageArr[ind].tractate_comment_num + 1;
            if (_this.pinglunArr.length == 5) {
              _this.pinglunIvalue = "";
              return;
            }
            _this.pinglunArr.push({
              info_avatar: _this.myheaderSrc,
              info_nick: _this.myinfo_nick,
              laudCount: 0,
              comment_msg: _this.pinglunIvalue,
              comment_time: util.formatDate(new Date())
            });
            _this.pinglunIvalue = "";
          } else if (res.data.code == 401 || res.data.code == 99) {
            _this.pinglunIvalue = "";
            wx.showToast({
              title: "未登录",
              icon: "none",
              duration: 1000
            });
            setTimeout(function() {
              wx.navigateTo({
                url: "/pages/loginRegister/main"
              });
            }, 1000);
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 点赞评论
    dianZanclickss(id, e) {
      var _this = this;
      if (id == undefined) {
        wx.showToast({
          title: "点赞成功",
          icon: "true",
          duration: 1000,
          mask: true
        });
        if (_this.pinglunArr[e].laudCount == 1) {
          _this.pinglunArr[e].laudCount = _this.pinglunArr[e].laudCount - 1;
          _this.pinglunArr[e].my_comment_num = 0;
        } else {
          _this.pinglunArr[e].laudCount = _this.pinglunArr[e].laudCount + 1;
          _this.pinglunArr[e].my_comment_num = 1;
        }
        return;
      } else {
        wx.request({
          url: "https://api.zhaoshengku.net/index/comment/setlaud",
          method: "post",
          data: {
            comment_id: id,
            oper_type: "add"
          },
          header: {
            Authorization: _this.headerCode
          },
          success: res => {
            console.log(res);
            if (res.data.code == 200) {
              _this.pinglunArr[e].laudCount = _this.pinglunArr[e].laudCount - 1;
              _this.pinglunArr[e].my_comment_num = 0;
            } else {
              wx.showToast({
                title: "点赞成功",
                icon: "true",
                duration: 1000,
                mask: true
              });
              _this.pinglunArr[e].laudCount = _this.pinglunArr[e].laudCount + 1;
              _this.pinglunArr[e].my_comment_num = 1;
              console.log(_this.pinglunArr[e]);
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      }
    },
    // 点击图片放大
    topic_preview(e, index) {
      this.imgfor = true;
      var _this = this;
      var url = _this.dongtaiPageArr[e].tractate_img[index];
      var urls = _this.dongtaiPageArr[e].tractate_img;
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      });
    },
    // 点击图片放大
    pinglun(e) {
      this.pinglunIvalue = e.mp.detail.value;
    },
    onShows() {
      // 获取最新动态
      var _this = this;
      wx.getStorage({
        key: "koken",
        success: res => {
          if (res.data) {
            _this.headerCode = "Bearer " + res.data;
            //  验证token
            wx.request({
              url: "https://api.zhaoshengku.net/index/login/verifytoken",
              method: "post",
              header: {
                Authorization: _this.headerCode
              },
              success: res => {
                if (res.data.code == 200) {
                  _this.loginIsshow = true;
                  // 获取自己的信息
                  _this.myheaderSrc = _this.$store.state.myxinxi.info_avatar;
                  _this.myinfo_nick = _this.$store.state.myxinxi.info_nick;
                }
              },
              fail: res => {
                console.log(res);
                if (res.errMsg) {
                  wx.showToast({
                    title: "请检查网络连接！",
                    icon: "none",
                    duration: 1500
                  });
                }
              }
            });
          }
        }
      });
      _this.itemTractate_comment_numInput = -1;
      _this.itemTractate_comment_numInputs = -1;
      if (_this.imgfor) {
        _this.imgfor = false;
        return;
      } else {
        wx.showToast({
          title: "",
          icon: "loading",
          duration: 5000,
          mask: true
        });
        this.pagenum = 1;
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/gettractate",
          method: "POST",
          header: {
            "X-Requested-With": "xmlhttprequest",
            Authorization: _this.headerCode
          },
          data: {
            pagenum: _this.pagenum,
            pagesize: 10,
            info_subdomain: this.$store.state.myxinxi.info_phone
          },
          success: res => {
            if (res.data.code == 200) {
              wx.stopPullDownRefresh();
              _this.lastPagenum = res.data.data.last_page;
              _this.dongtaiPageArr = res.data.data.data;

              for (var i = 0; i < _this.dongtaiPageArr.length; i++) {
                _this.dongtaiPageArr[
                  i
                ].tractate_add_time = _this.dongtaiPageArr[
                  i
                ].tractate_add_time.substring(0, 11);
              }
              wx.hideToast();
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
        // 获取token
      }
    },
    gengs(e) {
      this.huifupagenum += 1;
      wx.showToast({
        title: "正在加载中",
        icon: "loading",
        duration: 5000,
        mask: true
      });
      var _this = this;
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/getcomment",
        method: "post",
        header: {
          Authorization: _this.headerCode
        },
        data: {
          pagenum: this.huifupagenum,
          pagesize: 5,
          comment_type: 2,
          comment_fromid: e
        },
        success: res => {
          if (res.data.code == 200) {
            wx.hideToast();
            if (this.huifupagenum == res.data.data.last_page) {
              this.alaisshow = false;
            } else {
              this.alaisshow = true;
            }
            _this.pinglunArr = _this.pinglunArr.concat(res.data.data.data);
            if (res.data.data.data.length > 0) {
              _this.pinglunArr.forEach(res => {
                res.comment_time = res.comment_time.substring(0, 10);
              });
            }
          } else {
            wx.hideToast();
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 1500,
              mask: true
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 点击动态跳主页
    clickto(id) {
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/getinfo",
        method: "post",
        data: {
          id: id
        },
        header: {
          Authorization: this.headerCode
        },
        success: res => {
          let url;
          console.log(res);
          if (res.data.code == 200) {
            if (res.data.data.info_type == 5) {
              url = "myhome";
            } else if (res.data.data.info_type == 4) {
              url = "myhomeEducat";
            }
            wx.navigateTo({
              url:
                "/pages/" +
                url +
                "/main?id=" +
                id +
                "&expor=0&name=" +
                res.data.data.info_subdomain
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 发布动态
    fDongt() {
      wx.navigateTo({
        url: "/pages/releaseDynamics/main?from=1"
      });
    }
  },
  onShow() {
    this.onShows();
  },
  // 上拉刷新
  onReachBottom() {
    var _this = this;
    if (this.dongtaiPageArr.length < 10) {
      return;
    } else {
      wx.showToast({
        title: "正在加载中",
        icon: "loading",
        duration: 5000,
        mask: true
      });
    }
    _this.pagenum += 1;
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/gettractate",
      method: "POST",
      header: {
        "X-Requested-With": "xmlhttprequest",
        Authorization: _this.headerCode
      },
      data: {
        pagenum: _this.pagenum,
        pagesize: 10
      },
      success: res => {
        if (res.data.code == 200) {
          wx.hideToast();
          if (res.data.data.data.length == 0) {
            wx.showToast({
              title: "暂时没有更多动态",
              icon: "none",
              duration: 1000,
              mask: true
            });
          } else {
            _this.dongtaiPageArr = _this.dongtaiPageArr.concat(
              res.data.data.data
            );
            for (var i = 0; i < _this.dongtaiPageArr.length; i++) {
              _this.dongtaiPageArr[i].tractate_add_time = _this.dongtaiPageArr[
                i
              ].tractate_add_time.substring(0, 11);
            }
          }
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
  },
  mounted() {
    // 设置头
    wx.setNavigationBarTitle({
      title: "发现"
    });
  },
  onHide() {},
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style scoped>
/* 设置背景 */

.nono_div {
  width: 100%;
  margin: 0 auto;
  font-size: 26rpx;
  color: #666;
  background: #fff;
  text-align: center;
  padding: 100rpx 0;
}
.nono_div img {
  width: 200rpx;
  height: 110rpx;
  vertical-align: middle;
  margin-left: -52rpx;
}

.find_die {
  width: 100%;
  background: #dddddd;
}
.find_die > div {
  background: #fff;
  padding: 0 30rpx 50rpx 30rpx;
}
.find_die > div > div {
  padding-top: 20rpx;
  border-bottom: 1px solid #dddddd;
}
.find_die > div > div:last-child {
  border-bottom: none;
}
.find_die > div > div > p:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 21rpx;
}
.find_die > div > div > p:nth-child(1) > span:nth-child(1) {
  display: flex;
  align-items: center;
}
.find_die > div > div > p:nth-child(1) > span > img:nth-child(1) {
  width: 60rpx;
  height: 60rpx;
  margin-right: 17rpx;
  border-radius: 50%;
}
.find_die > div > div > p:nth-child(1) > span > span:nth-child(2) {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  width: 500rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.find_die > div > div > p:nth-child(1) > img:nth-child(2) {
  width: 101rpx;
  height: 43rpx;
}
.find_die > div > div > p:nth-child(2) {
  margin-left: 80rpx;
  margin-right: 30rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.find_die > div > div > div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  margin-left: 80rpx;
}
.find_die > div > div > div:nth-child(3) > div {
  width: 221rpx;
  height: 221rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  overflow: hidden;
  border-radius: 10rpx;
}
.find_die > div > div > div:nth-child(3) img {
  width: 100%;
  height: 100%;
}
.find_die > div > div > p:nth-child(4) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20rpx;
}
.find_die > div > div > p:nth-child(4) > span:nth-child(1) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  margin-right: 18rpx;
}
.find_die > div > div > p:nth-child(4) > span:nth-child(2),
.find_die > div > div > p:nth-child(4) > span:nth-child(3) {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.find_die > div > div > p:nth-child(4) > span:nth-child(2) {
  margin-right: 20rpx;
}
.find_die > div > div > p:nth-child(4) > span:nth-child(2) > img {
  width: 35rpx;
  height: 35rpx;
  margin-right: 5rpx;
}
.find_die > div > div > p:nth-child(4) > span:nth-child(3) > img {
  width: 32rpx;
  height: 34rpx;
  margin-right: 5rpx;
}
.find_die > div > div > .huifydiv {
  background: #eeeeee;
  padding: 0rpx 30rpx;
}
.find_die > div > div > .huifydiv > div {
  border-bottom: 1px solid #bebebe;
}
.find_die > div > div > .huifydiv > div:last-child {
  border-bottom: none;
}
.find_die > div > div > .huifydiv > div > p:nth-child(1) {
  display: flex;
  align-items: center;
  padding-top: 25rpx;
  margin-bottom: 15rpx;
}
.find_die > div > div > .huifydiv > div > p:nth-child(1) > img:nth-child(1) {
  width: 49rpx;
  height: 49rpx;
  margin-right: 11rpx;
  border-radius: 50%;
}
.find_die > div > div > .huifydiv > div > p:nth-child(1) > span:nth-child(2) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(34, 151, 212, 1);
  margin-right: 28rpx;
  width: 500rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.find_die > div > div > .huifydiv > div > p:nth-child(1) > img:nth-child(3) {
  width: 15rpx;
  height: 22rpx;
  margin-right: 10rpx;
}
.find_die > div > div > .huifydiv > div > p:nth-child(1) > span:nth-child(4) {
  font-size: 22rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.find_die > div > div > .huifydiv > div > p:nth-child(2) {
  margin-left: 60rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 30rpx;
}
.find_die > div > div > .huifydiv > div > p:nth-child(3) {
  display: flex;
  justify-content: flex-end;
}
.find_die > div > div > .huifydiv > div > p:nth-child(3) > span:nth-child(1) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  margin-right: 30rpx;
}
.find_die
  > div
  > div
  > .huifydiv
  > div
  > p:nth-child(3)
  > span:nth-child(2)
  > img {
  width: 24rpx;
  height: 26rpx;
  margin-right: 9rpx;
}
.find_die > div > div > .huifydiv > div > p:nth-child(3) > span:nth-child(2) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.span_input_p {
  width: 100%;
  display: flex;
  height: 60rpx;
  margin: 10rpx 0;
}
.span_input_p > .span_p {
  display: inline-block;
  width: 130rpx;
  height: 60rpx;
  background: #1aad19;
  line-height: 60rpx;
  text-align: center;
  border-radius: 0 10rpx 10rpx 0;
  color: #fff;
  font-size: 26rpx;
}
.input_p {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  background: #e5e5e5;
  padding: 0 10rpx;
  border-radius: 10rpx 0 0 10rpx;
}
.alangto {
  width: 100%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 25rpx;
  color: #666;
}
.find_fab_jia {
  background: url("https://www.zhaoshengku.net/beijdongt.png");
  width: 129rpx;
  height: 129rpx;
  background-size: 100% 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 45rpx;
  right: 30rpx;
}
.find_fab_jia img {
  width: 71rpx;
  height: 71rpx;
  margin-top: -4rpx;
}
.li_one_home-zuixin-con {
  position: relative;
}
.v_imgsrc {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  top: 33rpx;
  left: 35rpx;
}
</style>
